<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>个人自序</title>
    <meta name="theme-color" content="#ffc91d" />
    <link rel="icon" href="static/img/favicon.ico" />
    <link href="static/kico.css" rel="stylesheet" type="text/css" />
    <link href="static/paul.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1" />
</head>

<body>
    <aside class="sidebar">
        <div class="avatar">
            <img src="../assets/img/headPhoto.jpg" title="Mr.Y" />
        </div>
        <nav class="nav">
            <a href="../index.html">首页</a>
            <a href="#info">资料</a>
            <a href="#skills">技能</a>
            <a href="#works">作品</a>
            <a href="#story">经历</a>

        </nav>
    </aside>
    <main>
        <section id="info">
            <div class="wrap">
                <h2 class="title">个人资料</h2>
                <div class="row">
                    <div class="col-l-4">
                        <p>姓名：袁胜磊</p>
                        <p>性别：男</p>
                        <p>年龄：22</p>
                        <p>学历：本科</p>
                        <p>毕业院校：长江大学工程技术学院</p>
                    </div>
                    <div class="col-l-4">
                        <p>QQ：<a href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=1754056399&website=www.oicqzone.com"
                                title="添加好友">1754056399</a></p>
                        <p>GitHub：<a href="https://github.com/bestMrY">bestMrY</a></p>
                        <p>Gitee：<a href="https://gitee.com/Best_Mr_Y">Best_Mr_Y</a></p>
                        <p>博客：<a href="https://blog.csdn.net/Best_Mr_Y/">www.oyyandwjw.cn</a></p>
                        <p>邮箱：<a
                                href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=xqSjtbKZq7Tov4agqb6rp6_q6KWpqw">best_mr.y@foxmail.com</a>
                        </p>
                    </div>
                    <div class="col-l-4">
                        <p>我是一个热爱钻研计算机技术的少年，从小开始对计算机有极大的兴趣。作为计算机专业的学生，我热爱我的专业并为其投入巨大的热情和精力。希望大家能和我一同热爱计算机！</p>
                    </div>
                </div>
            </div>
        </section>
        <section id="skills">
            <div class="wrap">
                <h2 class="title">掌握的技能</h2>
                <div class="row scrollable">
                    <div class="col-s-6 col-m-4 center-fixed">
                        <div class="skills-icon">
                            <i class="fa fa-html5"></i>
                        </div>
                        <div class="skills-title">
                            <h3>HTML 5</h3>
                            <p>熟悉 HTML5 网站的架构和开发</p>
                        </div>
                    </div>
                    <div class="col-s-6 col-m-4 center-fixed">
                        <div class="skills-icon">
                            <i class="fa fa-css3"></i>
                        </div>
                        <div class="skills-title">
                            <h3>CSS3</h3>
                            <p>熟悉使用 CSS3 写响应式网站、动画等</p>
                        </div>
                    </div>
                    <div class="col-s-6 col-m-4 center-fixed">
                        <div class="skills-icon">
                            <i class="fa fa-code"></i>
                        </div>
                        <div class="skills-title">
                            <h3>JavaScript</h3>
                            <p>能使用 JS 制作简单的程序、交互与特效</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="works">
            <div class="wrap">
                <h2 class="title">个人作品</h2>
                <div class="row">
                    <div class="col-s-6">
                        <div class="works-item">
                            <img src="static/img/works/web1.png" />
                            <p>个人博客</p>
                        </div>
                    </div>
                    <div class="col-s-6">
                        <div class="works-item">
                            <img src="static/img/works/web2.png" />
                            <p>博客主题</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="story">
            <div class="wrap">
                <h2 class="title">个人经历</h2>
                <div class="row">
                    <div class="col-m-8">
                        <ul class="timeline">
                            <li>2018.09：步入大学 </li>
                            <li>2018.12: 进入ACM实验室 </li>
                            <li>2019.05: 参加CCPC竞赛 </li>
                            <li>2019.08: 参加湖南省ACM竞赛 </li>
                            <li>2019.11: 进入Maker-lot实验室</li>
                            <li>2019.12: 建立首个个人博客 </li>
                            <li>---</li>
                        </ul>
                    </div>
                    <div class="col-m-4 center-fixed">
                        <img src="static/img/story.png" />
                    </div>
                </div>
            </div>
        </section>

        <footer>
            <p>© 2020 By <a href="https://www.oyyandwjw.cn" title="ysl_and_I的博客" target="_blank">ysl_and_I</a>.</p>
        </footer>
    </main>

    <script src="static/kico.js"></script>
    <script src="static/paul.js"></script>
    <!-- 网易云音乐 -->
    <embed frameborder="no" border="0" marginwidth="0" marginheight="0" width=0 height=0
        src="//music.163.com/outchain/player?type=0&id=4950890732&auto=1&height=0"></embed>
</body>

</html>